<div id="app">
  <h3>小黑的书架</h3>
 书名： <input type="text" v-model="val">
 作者： <input type="text" v-model="val2">
  <button @click="add()">添加</button>
  <ul>
    <li v-for="(item,index) in booksList" :key="item.id">
      <span>{{item.name}} </span>
      <span>{{item.author}} </span>
      <button @click="del(item.id)" v-if="">删除</button>
    </li>
  </ul>
</div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      booksList: [
        { id: 1, name: '《红楼梦》', author: '曹雪芹' },
        { id: 2, name: '《西游记》', author: '吴承恩' },
        { id: 3, name: '《水浒传》', author: '施耐庵' },
        { id: 4, name: '《三国演义》', author: '罗贯中' }
      ],
      val:'',
      val2:'',
      index:0,
      
    },
    methods:{
      function(){

      },
        add() {
        this.booksList.push({
          id: this.booksList.length + 1,
          name: this.val,
          author: this.val2
        })
        this.val = this.val2 = ''
      },
      del(e){
      const arr = this.booksList.filter(ele=>{
        return ele.id!=e
      } )
      console.log(arr);
      this.booksList = arr
      }
    }
  })
</script>